import React, { Component } from "react";
import "./Website.css";
import axios from "../../utils/http";
//1. 安装
//2. 导入
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";


export default class Website extends Component {
    state = {
        title: "", //标题
        url: "", //网址
        keywords: "", //关键字
        websites: [], //所有网址保存的数组
        msg: "",
    };

    render() {
        //解构赋值
        let { title, url, keywords, msg } = this.state;
        return (
            <div className="website-container">
                <ToastContainer />
                <h1>网址管理</h1>
                <hr />
                <form action="">
                    标题:{" "}
                    <input
                        type="text"
                        value={title}
                        onChange={this.save("title")}
                    />{" "}
                    网址:{" "}
                    <input
                        onChange={this.save("url")}
                        value={url}
                        type="text"
                    />{" "}
                    关键字{" "}
                    <input
                        type="text"
                        value={keywords}
                        onChange={this.save("keywords")}
                    />
                    <button onClick={this.addWebsite}>新增</button>
                </form>
                <hr />
                <div className="search">
                    <input
                        type="text"
                        placeholder="输入您的关键字"
                        value={msg}
                        onChange={this.save("msg")}
                    />
                    &nbsp;&nbsp;<button onClick={this.search}>搜索</button>
                </div>
                <hr />
                <table border="1" width="100%">
                    <thead>
                        <tr>
                            <td>ID</td>
                            <td>标题</td>
                            <td>网址</td>
                            <td>关键字</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <thead>
                        {this.state.websites.map((item) => {
                            return (
                                <tr key={item.id}>
                                    <td>{item.id}</td>
                                    <td>{item.title}</td>
                                    <td>{item.url}</td>
                                    <td>{item.keywords}</td>
                                    <td>
                                        <button onClick={this.remove(item.id)}>
                                            删除
                                        </button>
                                    </td>
                                </tr>
                            );
                        })}
                    </thead>
                </table>
            </div>
        );
    }

    //删除
    remove = (id) => {
        return async () => {
            //确认提示
            if(!window.confirm('你确定要删除 '+id+' 记录么??')) return;
            //发送请求
            await axios.delete(
                "/website/" + id
            ); // params 参数
            //成功提示
            this.toast("success", "删除成功!!!");
            //移除 websites 中对应的那个记录
            let newData = this.state.websites.filter(item => item.id !== id);
            this.setState({
                websites: newData
            })
        };
    };

    // 搜索
    search = async () => {
        //发送请求
        let res = await axios({
            method: "get",
            url: "/website",
            params: {
                q: this.state.msg,
            },
        });
        //更新状态
        this.setState({
            websites: res,
        });
        
    };

    //更新 input 对应的状态
    save = (attr) => {
        return (e) => {
            //更新状态
            this.setState({
                [attr]: e.target.value,
            });
        };
    };

    //新增网址
    addWebsite = async (e) => { 
        //阻止默认行为
        e.preventDefault();
        //解构赋值
        let { title, url, keywords, websites } = this.state;
        //发送请求
        let result = await axios.post("/website", {
            title,
            url,
            keywords,
        });
        //清空输入框的内容
        this.setState({
            url: "",
            keywords: "",
            title: "",
        });
        //提醒
        this.toast("success", "添加成功");
        //更新页面显示
        let newData = [...websites, result];
        this.setState({
            websites: newData
        })
    };

    //封装提示
    toast = (type, msg) => {
        toast[type](msg, {
            position: toast.POSITION.TOP_CENTER,
        });
    };

    //生命周期钩子
    async componentDidMount() {
        let res = await axios("/website");
        this.setState({
            websites: res,
        });
    }
}
